//引入封装好的侧边栏
import Vsider from "../components/sider.jsx";
//引入布局容器
import { Layout, Dropdown, message,Button } from 'antd';
//引入懒加载 
import { lazy, Suspense } from "react";
//引入路由
import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
import { DownOutlined } from '@ant-design/icons'


const { Header, Content } = Layout;
//菜单管理页面
const Menu = lazy(() => import('../views/menu/index.jsx'));
//首页 Home
const Home = lazy(() => import("../views/home"));


const HeaderStyle = {
    background: "skyblue",
    fontSize: '24px',
    color: '#fff',
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'space-between'

}
const DropStyle = {
    marginTop: "14px",
    width: "10%"
}
const divStyle = {
    width: '80%'
}
export default function Index() {
    const router = useNavigate();
    const exit = () => { 
        //清除储存
        sessionStorage.removeItem('userInfo');
        //退出提示
        message.success({
            content: "成功退出",
            duration: 1
        })
        //跳转回登录页面
        setTimeout(() => {
            router('/login');
        }, 600);
    }
    const items = [
        {
            key: '1',
            label: (
                <p onClick={exit}>安全退出</p>
            ),
        }
    ];
    const goLogin = ()=>{
        router('/login')
    }




    return (<div id="index">
        {sessionStorage.getItem('userInfo') ? <Layout>
            {/* 侧边栏 */}
            <Vsider></Vsider>
            <Layout>
                {/* 头部标题 */}
                <Header style={HeaderStyle}>
                    <div style={divStyle}> 你敢劈我瓜？？？</div>
                    <Dropdown.Button
                        style={DropStyle}
                        icon={<DownOutlined />}
                        menu={{
                            items,
                        }}
                        trigger="click"
                    >
                        {sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')).username : ''}
                    </Dropdown.Button>
                </Header>
                {/* 主体内容 */}
                <Content>
                    <Suspense>
                        <Routes>
                            <Route path="/home" element={<Home></Home>}></Route>
                            <Route path="/menu" element={<Menu></Menu>}></Route>

                            {/* 重定向 */}
                            <Route path="*" element={<Navigate to="/home"></Navigate>}></Route>
                        </Routes>
                    </Suspense>
                </Content>
            </Layout>
        </Layout> : <p>您还未登录，请先去登录 <Button onClick={goLogin}>去登录</Button></p>}
    </div>)
}